<template>
  <div class="detail-main">
      <div class="detail-left">
          <div class="image-list">
              <div class="image-check">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="JPG"></el-checkbox>
                    <el-checkbox label="RAW"></el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="image-content">
                <div class="list-content">
                    <div  v-for="(img,index) in imageList" :key="index">
                        <div class="img-item" @click="chooseImage(img)">
                            <el-image
                            style="width: 100%; height: 100%"
                            :src="img.image"
                            fit="cover"></el-image>
                            <div class="img-mark" v-if="checkImageList.find(item => item.id == img.id)"></div>
                            <div class="is-add"></div>
                            <div class="check-image" :class="{active:checkImageList.find(item => item.id == img.id)}">
                                <i class="el-icon-check" v-if="checkImageList.find(item => item.id == img.id)"></i>
                            </div>
                        </div>
                        <div class="img-title">{{img.title}}</div>
                    </div>
                </div>
              </div>
          </div>

          <div class="img-list-change">
              <div class="change-handle">
                  <div class="all-and-down">
                    <el-checkbox v-model="checkAllImage" label="全选"></el-checkbox>
                    <span class="download">下载选中图片</span>
                  </div>

                    <div class="para-item" @click="changeType(1)">
                        <div class="parallelogram" :class="{'para-active':listType==1}"></div>
                        <div class="para-title">原图</div>
                    </div>

                    <div class="para-item" @click="changeType(2)">
                        <div class="parallelogram" :class="{'para-active':listType==2}"></div>
                        <div class="para-title">初修图</div>
                    </div>
                    <div class="para-item" @click="changeType(3)">
                        <div class="parallelogram" :class="{'para-active':listType==3}"></div>
                        <div class="para-title">转档图</div>
                    </div>

                  
              </div>

              <div class="server-btn">
                  <div class="truing-btn"> 精修服务 </div>
                  <div class="truing-order"> 转到印品订单 </div>
              </div>
          </div>
      </div>

      <div class="detail-right">
          <div class="base-title">基本信息</div>
         <div class="base-content">
             <div class="content-item">
                 <div class="item-title">房间号　　:</div>
                 <div class="item-value">{{baseInfo.roomNo}}</div>
             </div>
             <div class="content-item">
                 <div class="item-title">修片任务单号 :</div>
                 <div class="item-value">{{baseInfo.missionOrderNum}}</div>
             </div>
             <div class="content-item">
                 <div class="item-title">店家名称 :</div>
                 <div class="item-value">{{baseInfo.storeName}}</div>
             </div>
            <div class="content-item">
                <div class="item-title">客户名称 :</div>
                <div class="item-value">{{baseInfo.customName}}</div>
            </div>
            <div class="content-item">
                <div class="item-title">客户电话 :</div>
                <div class="item-value">{{baseInfo.customPhone}}</div>
            </div>
            <div class="content-item">
                <div class="item-title">照片数量 :</div>
                <div class="item-value" style="color:red">{{baseInfo.photoNum}}</div>
            </div>
            <div class="content-item">
                <div class="item-title">任务类型 :</div>
                <div class="item-value">{{baseInfo.missionType}}</div>
            </div>
         </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            checkAllImage:false,
            checkImageList:[
                { createTime:'2021-03-26 10:27:00', picSize:'5990 * 3320', picQuality : '89990KB', title:'图片1231231231231', id: 1, istransfer:true,  isAdd: true, isremark:false, isNewRemark:false, image:'http://hucai-a.oss-cn-hangzhou.aliyuncs.com/p1.hucai.com/20210413/93651556020210413/fine/thumb/93651556020210413_0004_middle.jpg' }
            ],
            checkList:['JPG'],
            imageList:[
                { createTime:'2021-03-26 10:27:00', picSize:'5990 * 3320', picQuality : '89990KB', title:'图片1231231231231', id: 1, istransfer:true,  isAdd: true, isremark:false, isNewRemark:false, image:'http://hucai-a.oss-cn-hangzhou.aliyuncs.com/p1.hucai.com/20210413/93651556020210413/fine/thumb/93651556020210413_0004_middle.jpg' },
                { createTime:'2021-03-26 10:27:00', picSize:'5990 * 3320', picQuality : '89990KB', title:'图片1231231231231', id: 2, istransfer:false, isAdd: false, isremark:true,  isNewRemark:false, image:'http://hucai-a.oss-cn-hangzhou.aliyuncs.com/p1.hucai.com/20210413/93651556020210413/fine/thumb/93651556020210413_0009_middle.jpg' },
                { createTime:'2021-03-26 10:27:00', picSize:'5990 * 3320', picQuality : '89990KB', title:'图片1231231231231', id: 3, istransfer:false, isAdd: false, isremark:false, isNewRemark:true,  image:'http://hucai-a.oss-cn-hangzhou.aliyuncs.com/p1.hucai.com/20210413/93651556020210413/fine/thumb/93651556020210413_0011_middle.jpg' },
            ],
            listType:1,
            baseInfo:{
                roomNo: 'HC-F-Y853788',
                missionOrderNum: 'HC-120091909428',
                storeName: '鲜檬东莞寮步巴黎婚纱摄影店',
                customName:'刘小米',
                customPhone:'13728242324',
                photoNum: '14',
                missionType:'只初修',
            }
        }
    },
    methods:{
        // 修改图片列表
        changeType(v){
            this.listType = v
        },
        // 选择图片
        chooseImage(data){
        let obj = this.checkImageList.find(item => item.id == data.id)
        if(obj){
            this.checkImageList = this.checkImageList.filter(item => item.id != obj.id)
            return
        }
        this.checkImageList.push(data)
        },
    }
}
</script>

<style lang='scss' scoped>
.detail-main{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .detail-left{
        background-color: #fff;
        box-shadow: 0px 0px 10px #ccc;
        border-radius: 5px;
        width: 75%;
        height: 100%;
        .image-list{
            width: 100%;
            height: 92%;
        }
        .image-check{
            height: 35px;
            display: flex;
            border-bottom: 1px solid #efefef;
            align-items: center;
            padding-right: 20px;
            justify-content: flex-end;
        }
        .image-content{
            height: calc(100% - 35px);
            overflow: auto;
        }
        .img-list-change{
            height: 8%;
            background-color: #ccc;
            display: flex;
            justify-content: space-between;
            .change-handle{
                width: 60%;
            }
            .all-and-down{
                height: 28px;
                display: flex;
                align-items: center;
                padding-left: 15px;
            }
            .download{
                cursor: pointer;
                margin-left: 15px;
                &:hover{
                    text-decoration: underline;
                }
            }
            .para-item{
                // height: 60px;
                width: 140px;
                float: left;
                height: calc(100% - 28px);
                position: relative;
            }
            .parallelogram{
                position: absolute;
                bottom: 0;
                width: 130px;
                height: 25px;
                transform: skew(-30deg);
                -webkit-transform: skew(-30deg);
                -moz-transform: skew(-30deg);
                -ms-transform: (-30deg);
                background-color: #ffe127;
                margin-left: 8px;
                cursor: pointer;
            }
            .para-title{
                position: absolute;
                bottom: 3px;
                width: 130px;
                cursor: pointer;
                text-align: center;
            }
            .para-active{
                 background-color: #f1f1f1;
            }
            .server-btn{
                width: 30%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .truing-btn,.truing-order{
                    text-align: center;
                    line-height: 35px;
                    border-radius: 5px;
                    width: 110px;
                    height: 35px;
                    cursor: pointer;
                    background-color: #ffe127;
                }
            }
        }
    }
    .detail-right{
        width: 24%;
        height: 100%;
        background-color: #fff;
        box-shadow: 0px 0px 10px #ccc;
        border-radius: 0 0 5px 5px;
        overflow: auto;
        .base-title{
            height: 40px;
            line-height: 40px;
            color: black;
            text-align: center;
            background-color: #ccc;
        }
        .base-content{
            height: calc(100% - 60px);
            overflow: auto;
            padding: 10px;
            .content-item{
                overflow: hidden;
                width: 100%;
                margin-bottom: 5px;
            }
            .item-title{
                width: 35%;
                float: left;
                // text-align: center;
            }
            .item-value{
                width: 65%;
                 white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                float: left;
            }
        }
    }
}
.list-content{
    padding: 10px;
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 165px);
    grid-gap: 10px;
    // overflow: auto;
    .img-item{
        width: 165px;
        height: 130px;
        position: relative;
        .img-mark{
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #272822;
            opacity: 0.7;
            position: absolute;
        }
        .is-add{
          z-index: 10;
          position: absolute;
          top: 0;
          left: 0;
          border-left: #444042 18px solid;
          border-top: #444042 18px solid;
          border-right: transparent 18px solid;
          border-bottom:transparent 18px solid;
        }
        .is-add::after{
          content: '初';
          font-size: 12px;
          color: #fff;
          top: -14px;
          left: -15px;
          position: absolute;
          transform:rotate(-45deg);
        }
        .check-image{
          width: 18px;
          height: 18px;
          border-radius: 11px;
          border: 1px solid #fff;
          background-color: rgba(117, 117, 115, 0.6);
          position: absolute;
          top: 10px;
          right: 10px;
        }
        .active{
          width: 18px;
          height: 18px;
          border-radius: 11px;
          border: 1px solid rgb(255, 226, 41);
          background-color: rgba(25, 25, 25, 0.9);
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 10;
          line-height: 16px;
          text-align: center;
          color: rgb(255, 226, 41);
        }
            
    }
}
.img-title{
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size: 14px;
}
</style>